<template>
  <!--  最大的盒子-->
  <div>
    <!--    右侧表格的盒子-->
    <div >
      <!--用户管理-->
      <el-row>
        <el-col>
          <!--          查询-->
          <el-form :inline="true"
                   :model="selectForm"
                   ref="selectFormRef"
          >
            <el-form-item class="font-sizes" label="角色名称"  prop="roleName" >
              <el-input v-model.trim="selectForm.roleName" placeholder="请输入角色名称"  ></el-input>
            </el-form-item>

            <!--            <el-form-item class="font-sizes" label="权限字符" prop="sysRoleKey">-->
            <!--              <el-input v-model="selectForm.sysRoleKey" placeholder="请输入权限字符" ></el-input>-->
            <!--            </el-form-item>-->

            <el-form-item class="font-sizes"   label="角色状态"  prop="roleState" >
              <el-select v-model.trim="selectForm.roleState" placeholder="请选择角色状态">
                <el-option
                    :key="'C'"
                    :value="'C'"
                    :label="'正常'"
                />
                <el-option
                    :key="'E'"
                    :value="'E'"
                    :label="'停用'"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm(selectFormRef)"><el-icon ><Search /></el-icon>搜索</el-button>
            </el-form-item>

            <el-form-item>
              <el-button @click="resetForm(selectFormRef)" ><el-icon><Refresh /></el-icon>重置</el-button>
            </el-form-item>


          </el-form>
        </el-col>
      </el-row>
      <!--    增删改查，导入导出的按钮-->
      <el-button type="primary" @click="d.centerDialogVisible = true;d.dialogTitle='新增角色';" plain><el-icon><Plus /></el-icon>新增</el-button>

      <!--    修改按钮-->
      <el-button v-if="d.selectionLength==1" @click="d.centerDialogVisible=true;d.dialogTitle='修改角色';clearr()"  type="success" plain><el-icon><EditPen /></el-icon>修改</el-button>
      <el-button v-if="d.selectionLength!=1" disabled  type="success" plain><el-icon><EditPen /></el-icon>修改</el-button>
      <!--   删除按钮 -->
      <el-button v-if="d.selectionLength==0" disabled type="danger" plain><el-icon><DeleteFilled /></el-icon>删除</el-button>
      <el-button v-if="d.selectionLength!=0" @click="handleDelete(d.dataonLineListSelections)" type="danger" plain><el-icon><DeleteFilled /></el-icon>删除</el-button>
      <!--      <el-button type="info" plain><el-icon><Upload /></el-icon>导入</el-button>-->
      <!--    导出按钮-->
      <el-button v-if="d.selectionLength==0" disabled type="warning" plain><el-icon><Download /></el-icon>导出</el-button>
      <el-button v-if="d.selectionLength!=0" type="warning" plain><el-icon><Download /></el-icon>导出</el-button>
      <el-table
          :header-cell-style="{background:'#F8F8F9',color:'#000000'}"
          ref="multipleTableRef"
          :data="d.tableData"
          max-height="530px"
          border
          style="width: 100%;margin-top: 10px;height: 550px"
          @selection-change="handleSelectionChange"
      >
        <!--    选择框-->
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="角色编号" property="sysRoleId" width="120">
          <template #default="scope">{{ scope.row.sysRoleId }}</template>
        </el-table-column>
        <el-table-column align="center" property="sysRoleName" label="角色名称" width="120" />
        <!--        <el-table-column align="center" property="sysRoleKey" label="权限字符" width="120" />-->
        <el-table-column align="center" property="sysRoleCreateTime" label="创建时间" show-overflow-tooltip />
        <el-table-column align="center" property="sysRoleStatus" label="状态" width="70" show-overflow-tooltip >
          <!--      状态需要插槽-->
          <template #default="scope">
            <el-switch
                v-model="scope.row.sysRoleStatus"
                active-value="C"
                inactive-value="E"
                @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" width="370" property="address3" label="操作" show-overflow-tooltip >
          <template #default="scope" >
            <el-button
                @click="handleUpdate(scope.row);d.centerDialogVisible=true;d.dialogTitle='修改角色'"
                link
                v-if="scope.row.sysRoleKey==''"
            ><el-icon color="rgb(64,158,255)"><EditPen /></el-icon>修改</el-button>
            <el-button
                @click="handleDelete1(scope.row.sysRoleId)"
                v-if="scope.row.sysRoleKey==''"
                link
            ><el-icon color="rgb(64,158,255)"><Delete  /></el-icon>删除</el-button>
            <el-button
                link
                v-if="scope.row.sysRoleKey==''"
                @click="handleUpdate1(scope.row);d.centerDialogVisible1=true"
            ><el-icon color="rgb(64,158,255)"><CircleCheck /></el-icon>数据权限</el-button>
            <el-button
                link
                v-if="scope.row.sysRoleKey!='Super'"
                @click="handleUpdate2(scope.row);d.centerDialogVisible2=true"
            ><el-icon color="rgb(64,158,255)"><User /></el-icon>分配用户</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    下面是分页的选项部分-->
      <el-row justify="center" style="margin-left: 400px;margin-top: 10px">
        <el-col>
          <el-pagination
              class="page"
              background
              layout="total, prev, pager, next, jumper, ->"
              :current-page="d.page"
              :page-sizes="d.pageSizes"
              :page-size="d.size"
              :pager-count="5"
              :total="d.total"
              @current-change="currentChange"
              @size-change="sizeChange"/>
        </el-col>
      </el-row>
    </div>

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog
        v-model="d.centerDialogVisible"
        width="500px"
        append-to-body
        :title=d.dialogTitle
        align-center
        @close='resetForm1(insertFormRef)'
    >
      <el-form
          :rules="insertRules"
          ref="insertFormRef"
          :model="insertForm"
          label-width="100px"
      >
        <el-form-item  class="font-sizes" label="角色名称" prop="sysRoleName">
          <el-input v-model.trim="insertForm.sysRoleName"  placeholder="请输入角色名称" />
        </el-form-item>
        <!--        <el-form-item label="权限字符" prop="sysRoleKey">-->
        <!--          <el-input v-model="insertForm.sysRoleKey"  placeholder="请输入权限字符" />-->
        <!--        </el-form-item>-->
        <el-form-item class="font-sizes" label="状态" >
          <el-radio-group v-model="insertForm.sysRoleStatus" >
            <el-radio
                :key="'C'"
                :value="'C'"
                label="C"
            >正常</el-radio>
            <el-radio
                :key="'E'"
                :value="'E'"
                label="E"
            >禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="font-sizes" label="菜单权限"  >
          <el-tree
              class="tree-border"
              :data="menuTree"
              v-model="insertForm.perms"
              node-key="id"
              :props="defaultProps"
              ref="treeRef"
              show-checkbox
          />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveRole(insertFormRef)">确定</el-button>
        <el-button @click="d.centerDialogVisible = false;">取消</el-button>
      </span>
      </template>
    </el-dialog>


    <!-- 数据权限 -->
    <el-dialog
        v-model="d.centerDialogVisible1"
        width="500px"
        append-to-body
        title="分配数据权限"
        align-center
        @close='resetForm2(insertFormRef1)'
    >
      <el-form
          ref="insertFormRef1"
          :model="insertForm1"
          label-width="100px"
      >

        <el-form-item  class="font-sizes" label="角色名称" prop="sysRoleName">
          <el-input  v-model="insertForm1.sysRoleName"  :disabled="true"/>
        </el-form-item>
        <el-form-item prop="recruitSysStationId" class="font-sizes" label="权限范围">
          <el-select  v-model="insertForm1.sysRoleDataScope"   placeholder="请选择权限范围">
            <el-option
                v-for="item in d.dataScopeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item   v-if="insertForm1.sysRoleDataScope==2" class="font-sizes" label="数据权限"  >
          <el-tree
              class="tree-border"
              :data="menuTree1"
              v-model="insertForm1.perms"
              node-key="id"
              :props="defaultProps1"
              ref="treeRef1"
              show-checkbox
          />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveShu(insertFormRef1)">确定</el-button>
        <el-button @click="d.centerDialogVisible1 = false;">取消</el-button>
      </span>
      </template>
    </el-dialog>

    <!-- 分配用户 -->
    <el-dialog
        v-model="d.centerDialogVisible2"
        width="500px"
        append-to-body
        title="分配用户"
        align-center
        @close='resetForm3(insertFormRef2)'
    >
      <el-form
          ref="insertFormRef2"
          :model="insertForm2"
          label-width="100px"
      >

        <el-form-item  class="font-sizes" label="用户列表"  >
          <el-tree
              class="tree-border"
              :data="menuTree2"
              v-model="insertForm2.perms"
              node-key="id"
              :props="defaultProps2"
              ref="treeRef2"
              show-checkbox
          />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="giveUser(insertFormRef2)">确定</el-button>
        <el-button @click="d.centerDialogVisible2 = false;">取消</el-button>
      </span>
      </template>
    </el-dialog>

  </div>

</template>

<script setup lang="ts">
import qs from 'qs';
import {nextTick,onBeforeMount, reactive, ref, toRefs} from "vue";
import type {FormInstance, FormRules} from 'element-plus'
import axios from 'axios'
import {ElMessage, ElMessageBox, UploadProps,ElTree} from "element-plus";

import { ElTable } from 'element-plus'

let d = reactive({
  //总记录数
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  page: 1, //第几页
  size: 10, //一页多少条
  //源数据
  simDataList: [],
  //改变后的数据
  tableData: [],
  //数组长度
  selectionLength:0,
  //selection数组
  dataonLineListSelections: [],
  //新增和修改页面的dialog
  centerDialogVisible:false,
  //数据权限页面
  centerDialogVisible1:false,
  //分配用户
  centerDialogVisible2:false,
  //  根据情况修改title
  dialogTitle:'新增用户',
  checkSecurity:false,//是否父子节点级联，false为级联
  checkKeys:[],//选中的menu
  checkKeys1:[],//选中的部门
  checkKeys2:[],//选中的人
  dataScopeOptions: [
    {
      value: "1",
      label: "全部数据权限"
    },
    {
      value: "2",
      label: "自定数据权限"
    },
    {
      value: "3",
      label: "本部门数据权限"
    },
    // {
    //   value: "4",
    //   label: "本部门及以下数据权限"
    // },
    // {
    //   value: "5",
    //   label: "仅本人数据权限"
    // }
  ],
  dontDelete:[],
});

interface  User {
  sysRoleId: string
  sysRoleName: string
  sysRoleStatus: string
  sysRoleCreateTime:string
  sysRoleRemark:string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  //选中的所有目标
  multipleSelection.value = val
  //获取选中的长度
  d.selectionLength=multipleSelection.value.length
  //获取选中的id数组
  d.dataonLineListSelections=val.map(item=>item.sysRoleId)
  // console.log(d.dataonLineListSelections)
  //判断长度为一时将值赋予修改表单

}

const clearr=()=>{
  if (d.selectionLength==1){
    handleUpdate(multipleSelection.value[0])
  }
}

// 查询的form表单
const selectFormRef = ref<FormInstance>()
//查询的表单
const selectForm = reactive({
  sysRoleKey:'',
  roleName:'',
  roleState:'',
})
// 表单搜索按钮
const submitForm = (formEl: FormInstance | undefined) => {
  if (d.simDataList!=null) {
    getTabelData()
  }
}
// 查询表单重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
  // console.log(formEl)
  formEl.resetFields()
  getTabelData()
}
const getTabelData=()=>{
  const data =searchig2();
  d.total=data.length
  let shu =data.splice(
      ( d.page - 1) * d.size ,
      d.size
  );
  d.tableData = shu
}
// 筛选
const searchig2 = () => {
  //p为过滤后的数组date 需要模糊查询的字段
  //inputValue 搜索框绑定的值
  return d.simDataList.filter((p)=>{//返回过滤后的数组
    return   p.sysRoleName.indexOf(selectForm.roleName)> -1
        &&p.sysRoleStatus.indexOf(selectForm.roleState)> -1;
  })
}


// 新增和修改的form表单
const insertFormRef = ref<FormInstance>()

const nameSelect = (rule: any, value: any, callback: any) => {
  if (value===''){
    callback(new Error('请输入角色名！'))
  }else{
    axios.post("http://localhost:1688/system/role/selectByName/"+value).then((res)=>{
      if (res.data.data!==null&&insertForm.sysRoleId=='0') {
        callback(new Error("角色名已存在请重新输入！"))
      } else {
        callback()
      }
    }).catch()
  }
}

// 新增表单重置按钮
const resetForm1 = (formEl: FormInstance | undefined) => {
  // console.log(formEl)
  formEl.resetFields()
  insertForm.sysRoleId='0'
  insertForm.sysRoleName=''
  insertForm.sysRoleStatus='C'
  insertForm.perms=[];
  treeRef.value.setCheckedKeys([])
  multipleTableRef.value!.clearSelection()
  // console.log(insertForm)
}

// 新增表单重置按钮
const resetForm2 = (formEl: FormInstance | undefined) => {
  // console.log(formEl)
  insertForm1.sysRoleId='0'
  insertForm1.sysRoleName=''
  if (insertForm1.sysRoleDataScope==2){
    treeRef1.value.setCheckedKeys([])
  }
  insertForm1.sysRoleDataScope=''
  insertForm1.perms=[];
  multipleTableRef.value!.clearSelection()
  // console.log(insertForm)
}
// 新增表单重置按钮
const resetForm3 = (formEl: FormInstance | undefined) => {
  // console.log(formEl)
  insertForm2.sysRoleId='0'
  insertForm2.perms=[];
  treeRef2.value.setCheckedKeys([])
  multipleTableRef.value!.clearSelection()
  // console.log(insertForm)
}
const insertRules = reactive({
  //验证非空和长度
  sysRoleName: [{
    validator: nameSelect,
    required: true,
    trigger: "blur"
  },{
    min: 2,
    message: '角色名称过短！！',
    trigger: 'blur'
  },{
    max:8,
    message: '角色名称过长！！',
    trigger: 'blur'
  },
  ],
})


// 数据权限的form表单
const insertFormRef1 = ref<FormInstance>()
// 数据权限的form表单
const insertFormRef2 = ref<FormInstance>()

//数据权限的表单
const insertForm1=reactive({
  sysRoleId:'0',
  sysRoleName:'',
  sysRoleDataScope:'',
  perms:[],
})
//分配角色的表单
const insertForm2=reactive({
  sysRoleId:'0',
  perms:[],
})

//数据权限按钮
const handleUpdate1=(row)=> {
  insertForm1.sysRoleId=row.sysRoleId;
  insertForm1.sysRoleName=row.sysRoleName;
  insertForm1.sysRoleDataScope=row.sysRoleDataScope;
  // 拿着用户id去查询菜单权限
  //查询当前角色授权了哪些部门，并且树形结构默认选中
  if (insertForm1.sysRoleDataScope==2){
    axios.post("http://localhost:1688/system/dept/check-keys/",qs.stringify({roleId:row.sysRoleId})).then((res)=>{
      d.checkKeys1 = res.data.data;
      if(d.checkKeys1){
        nextTick(()=>{
          let arr = []
          d.checkKeys1.forEach((item)=>{
            // console.log('节点',treeRef1.value.getNode(item.id).childNodes)
            if(!treeRef1.value.getNode(item.id).childNodes || !treeRef1.value.getNode(item.id).childNodes.length){
              arr.push(item.id)
            }
          })
          // console.log(arr)
          treeRef1.value.setCheckedKeys(arr,false)
        })
      }
    }).catch()
  }
}

//分配用户按钮
const handleUpdate2=(row)=> {
  insertForm2.sysRoleId=row.sysRoleId;
  // 拿着用户id去查询菜单权限
  //查询当前角色授权了哪些部门，并且树形结构默认选中
  // console.log(insertForm2)
  axios.post("http://localhost:1688/system/user/check-keys/",qs.stringify({roleId:row.sysRoleId})).then((res)=>{
    d.checkKeys2 = res.data.data;
    console.log(res)
    if(d.checkKeys2){
      nextTick(()=>{
        let arr = []
        d.checkKeys2.forEach((item)=>{
          console.log()
          if(!treeRef2.value.getNode(item.id).childNodes || !treeRef2.value.getNode(item.id).childNodes.length){
            // console.log(222)
            arr.push(item.id)
          }
        })
        // console.log(arr)
        treeRef2.value.setCheckedKeys(arr,false)
      })
    }
  }).catch()
}


//新增和修改的表单
const insertForm=reactive({
  sysRoleId:'0',
  sysRoleName:'',
  sysRoleStatus:'C',
  sysRoleKey:'',
  perms:[],
})

const saveRole = (formEl: FormInstance | undefined)=> {
  insertForm.perms=treeRef.value.getCheckedKeys()
  treeRef.value.getHalfCheckedKeys().forEach((p)=>{
    insertForm.perms.push(p)
  })
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (insertForm.sysRoleId=='0') {
        ElMessageBox.confirm(
            '请问确定要新增角色嘛?',
            '新增角色',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
        )
            .then(() => {
              axios.post("http://localhost:1688/system/role/addRole", insertForm).then((res) => {
                if (res.data.success) {
                  ElMessage({
                    message: "新增成功",
                    type: 'success'
                  })
                  console.log(insertForm)
                  resetForm1(formEl);
                  d.centerDialogVisible = false
                  multipleTableRef.value!.clearSelection()
                  getData()
                }
              }).catch(() => {
              })
            })
            .catch(() => {
              resetForm1(formEl);
              d.centerDialogVisible = false
              multipleTableRef.value!.clearSelection()
              getData()
              ElMessage({
                type: 'info',
                message: '新增角色取消',
              })
            })
        console.log(insertForm.perms)
      }else if(insertForm.sysRoleId!='0'){
        ElMessageBox.confirm(
            '请问确定要修改角色嘛?',
            '修改角色',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
        )
            .then(() => {
              if (insertForm.sysRoleKey!=''){
                resetForm1(formEl);
                d.centerDialogVisible = false
                multipleTableRef.value!.clearSelection()
                ElMessage({
                  message:"该角色不可修改",
                  type:'error'
                })
              }else {
                axios.post("http://localhost:1688/system/role/updateRole", insertForm).then((res) => {
                  if (res.data.success) {
                    ElMessage({
                      message: "修改成功",
                      type: 'success'
                    })
                    console.log(insertForm)
                    resetForm1(formEl);
                    d.centerDialogVisible = false
                    multipleTableRef.value!.clearSelection()
                    getData()
                  }
                }).catch(() => {
                })
              }
            })
            .catch(() => {
              resetForm1(formEl);
              d.centerDialogVisible = false
              multipleTableRef.value!.clearSelection()
              getData()
              ElMessage({
                type: 'info',
                message: '修改角色取消',
              })
            })
        console.log(insertForm.perms)
      }
    } else {
      ElMessage({
        message:"数据填写错误",
        type:'error'
      })
      return false
    }
  })
}

//数据权限
const saveShu = (formEl: FormInstance | undefined)=> {
  if (insertForm1.sysRoleDataScope==2){
    insertForm1.perms=treeRef1.value.getCheckedKeys()
    treeRef1.value.getHalfCheckedKeys().forEach((p)=>{
      insertForm1.perms.push(p)
    })
  }
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm(
          '请问确定要操作数据权限嘛?',
          '数据权限',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            axios.post("http://localhost:1688/system/role/addShu", insertForm1).then((res) => {
              if (res.data.success) {
                ElMessage({
                  message: "操作成功" +
                      "",
                  type: 'success'
                })
                console.log(insertForm1)
                resetForm2(formEl);
                d.centerDialogVisible1 = false
                multipleTableRef.value!.clearSelection()
                getData()
              }
            }).catch(() => {
            })
          })
          .catch(() => {
            resetForm2(formEl);
            d.centerDialogVisible1 = false
            multipleTableRef.value!.clearSelection()
            getData()
            ElMessage({
              type: 'info',
              message: '操作取消',
            })
          })
      console.log(insertForm1.perms)
    } else {
      ElMessage({
        message:"操作失败",
        type:'error'
      })
      return false
    }
  })
}

//分配角色
const giveUser = (formEl: FormInstance | undefined)=> {
  insertForm2.perms=treeRef2.value.getCheckedKeys()
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm(
          '请问确定要分配用户嘛?',
          '分配用户',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            axios.post("http://localhost:1688/system/role/giveUser", insertForm2).then((res) => {
              if (res.data.success) {
                ElMessage({
                  message: "操作成功",
                  type: 'success'
                })
                console.log(insertForm2)
                resetForm3(formEl);
                d.centerDialogVisible2 = false
                multipleTableRef.value!.clearSelection()
                getData()
              }
            }).catch(() => {
            })
          })
          .catch(() => {
            resetForm3(formEl);
            d.centerDialogVisible2 = false
            multipleTableRef.value!.clearSelection()
            getData()
            ElMessage({
              type: 'info',
              message: '分配用户取消',
            })
          })
    } else {
      ElMessage({
        message:"操作失败",
        type:'error'
      })
      return false
    }
  })
}


//菜單树
const defaultProps = {
  children: 'children',
  label: 'sysMenuName',
  id:'id',
  value:'sysMenuId'
}
const menuTree = ref([]);
const treeRef = ref<InstanceType<typeof ElTree>>()
//新增的时候删除所有key
const  clearKeys=()=>{
  treeRef.value.setCheckedKeys([])
}


const menuTree1 = ref([]);
const treeRef1 = ref<InstanceType<typeof ElTree>>()
//部门的
const defaultProps1 = {
  children: 'children',
  label: 'sysDeptName',
  id:'id',
  value:'sysDeptId'
}


const menuTree2 = ref([]);
const treeRef2 = ref<InstanceType<typeof ElTree>>()
//用户的
const defaultProps2 = {
  children: 'children',
  label: 'sysUserName',
  id:'id',
  value:'sysUserId'
}


/** 修改按钮操作 */
//这里的菜单权限去后台查询返回，这里还需要给上
const handleUpdate=(row)=> {
  insertForm.sysRoleId=row.sysRoleId;
  insertForm.sysRoleKey=row.sysRoleKey;
  insertForm.sysRoleName=row.sysRoleName;
  insertForm.sysRoleStatus=row.sysRoleStatus;
  // 拿着用户id去查询菜单权限
  //查询当前角色授权了哪些菜单，并且树形结构默认选中
  axios.post("http://localhost:1688/system/menu/check-keys/",qs.stringify({roleId:row.sysRoleId})).then((res)=>{
    // console.log(res)
    d.checkKeys = res.data.data;
    if(d.checkKeys){
      nextTick(()=>{
        let arr = []
        d.checkKeys.forEach((item)=>{
          if(!treeRef.value.getNode(item.id).childNodes || !treeRef.value.getNode(item.id).childNodes.length){
            arr.push(item.id)
          }
        })
        // console.log(arr)
        treeRef.value.setCheckedKeys(arr,false)
      })
    }
  }).catch()

}


/** 删除按钮操作 */
const handleDelete=(row)=> {
  ElMessageBox.confirm(
      '请问确定要删除嘛?',
      '批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        let aa=false;
        for (let j = 0; j <d.dontDelete.length; j++){
          for (let i = 0; i <d.dataonLineListSelections.length; i++) {
            if (d.dontDelete[j]==d.dataonLineListSelections[i]){
              aa=true;
            }
          }
        }
        if (aa){
          multipleTableRef.value!.clearSelection()
          ElMessage({
            message: "含有不可删除对象",
            type: 'error'
          })
        }else{
          axios({
            method: 'post',
            url: 'http://localhost:1006/role/deleteAllRole',
            data: row
          }).then((res) => {
            multipleTableRef.value!.clearSelection()
            ElMessage({
              message: "删除成功",
              type: 'success'
            })
            getData()
          }).catch()
        }
      })
      .catch(() => {
        multipleTableRef.value!.clearSelection()
        ElMessage({
          type: 'info',
          message: '删除取消',
        })
      })
}

/** 表格中删除按钮操作 */
const handleDelete1=(row)=> {

  ElMessageBox.confirm(
      '请问确定要删除嘛?',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.post("http://localhost:1688/system/role/deleteRole/"+row).then((res)=>{
          multipleTableRef.value!.clearSelection()
          ElMessage({
            message: "删除成功",
            type: 'success'
          })
          getData()
        }).catch()
      })
      .catch(() => {
        multipleTableRef.value!.clearSelection()
        ElMessage({
          type: 'info',
          message: '删除取消',
        })
      })
}



// 角色状态修改
const handleStatusChange=(row)=> {

  ElMessageBox.confirm(
      '请问确定要修改状态嘛?',
      '修改状态',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.post("http://localhost:1688/system/role/updateStatus/"+row.sysRoleId).then((res)=>{
          multipleTableRef.value!.clearSelection()
          ElMessage({
            message: "状态修改成功",
            type: 'success'
          })
          getData()
        }).catch()
      })
      .catch(() => {
        row.sysRoleStatus = row.sysRoleStatus === "C" ? "E" : "C";
        multipleTableRef.value!.clearSelection()
        ElMessage({
          type: 'info',
          message: '修改状态取消',
        })
      })

}


//前端分页
const getData = ()=>{
  axios.post("http://localhost:1688/system/role/lists").then((res)=>{
    if (res.data.code!=403){
      d.simDataList= res.data.data;
      // console.log(d.simDataList)
      let data = JSON.parse(JSON.stringify(d.simDataList))
      // console.log(d.tableData2)
      d.tableData =data.splice(
          (d.page - 1) * d.size,
          d.size
      );
      //将不可删除的角色存入数组
      for (let i = 0; i < d.tableData.length; i++) {
        if (d.tableData[i].sysRoleKey!=""){
          d.dontDelete.push((d.tableData[i].sysRoleId))
        }
      }
      console.log(d.dontDelete)
      d.total = d.simDataList.length
    }
  }).catch()
}

//获取菜单列表
const getData1 = ()=>{
  axios.post("http://localhost:1688/system/menu/lists").then((res)=>{
    if (res!=null){
      menuTree.value = res.data.data;
    }
  }).catch()
}

//获取部门列表
const getData2 = ()=>{
  axios.post("http://localhost:1688/system/dept/list").then((res)=>{
    if (res!=null){
      menuTree1.value = res.data.data;
    }
  }).catch()
}

//获取用户列表
const getData3 = ()=>{
  axios.post("http://localhost:1688/system/user/listss").then((res)=>{
    if (res!=null){
      menuTree2.value = res.data.data;
      // console.log(menuTree2.value)
    }
  }).catch()
}

//size改变时回调的函数，参数为当前的size
const sizeChange=(val: number)=> {
  d.size = val;
  d.page = 1;
  getData()
}
const currentChange = (val: any) => {
  d.page = val;
  getData();
}

onBeforeMount(()=>{
  getData()
  getData1()
  getData2()
  getData3()
})

</script>

<style scoped>
.font-sizes{
  font-weight:bold ;
}

/*部门树*/
.tree-border {
  width: 400px;
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius:4px;
}
/*新增角色的弹窗*/
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>